<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 0 auto;
        }

        table{
            width: 800px;
        }

        th,
        td {
            border: 1px solid #000;
        }

        td{
            background-color: rgb(242, 59, 87);
        }

        th{
            background-color: pink;
        }

        tr th:nth-child(5){
            color: palevioletred;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>订单详情页面</h2>
        <b>价格:<input type="text" class="jg"></b> <b>数量:<input type="text" class="sl"></b> <b>地址:<input type="text"
                class="dz"></b>
        <button onclick="add()">添加</button>
    </div>
    <table>
        <thead>
            <tr>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>总价</td>
                <td>收货地址</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</body>

</html>
<script>
    //获取元素
    var ipts = document.querySelector('input');
    var tbody = document.querySelector('tbody');
    var jg = document.querySelector('.jg');
    var sl = document.querySelector('.sl');
    var dz = document.querySelector('.dz');

    //本地存
    function cun(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }

    //本地取
    function qu() {
        var a = localStorage.getItem('data');
        if (a != null) {
            return JSON.parse(a)
        } else {
            return []
        }
    }

    //添加
    function add() {
        var arr = qu();
        arr.push({
            'price': jg.value,
            'num': sl.value,
            'address': dz.value
        })
        cun(arr);
        xr();
    }

    //渲染
    function xr() {
        tbody.innerHTML = '';
        var arr = qu();
        for (var i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr');
            tr.innerHTML = `
                <th>'小米青春版PLUS'</th>
                <th>${arr[i].price}</th>
                <th>${arr[i].num}</th>
                <th>${arr[i].price * arr[i].num}</th>
                <th>${arr[i].address}</th>
            `;
            tbody.appendChild(tr);
        }
    }
    xr();

    //删除
</script>